<template>
  <div class="common-layout">
    <el-container class="lay-container">
      <common-aside  class="lay-aside"/>
      <el-container>
        <el-header class="el-header">
          <common-header />
        </el-header>
        <common-tag></common-tag>
        <el-main class="right-main">
          <router-view v-slot="{ Component, route }">
            <!-- :include="include" -->
            <keep-alive >
              <component :is="Component" v-if="route.meta.keepAlive" />
            </keep-alive>
            <component :is="Component" v-if="!route.meta.keepAlive" />
        </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import commonAside from '@/components/layout/home/aside.vue';
import commonHeader from '@/components/layout/home/header.vue';
import commonTag from '@/components/layout/home/tag.vue';
import { useRouter } from 'vue-router';
import { reactive } from 'vue';
const router = useRouter();
//	用于记录实际缓存页面名称
const indexData = reactive({
  include: []
});

router.afterEach((to, from) => {
  //	把要缓存的页面加入缓存列表
  //	如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
  if (to.meta.keepAlive) {
      !indexData.include.includes(to.name) && indexData.include.push(to.name);
  }

  //	解决从首页进入列表页面的时候，读取的是缓存页面，如：
  //	第一次从首页进入列表页面，读取新数据，缓存起来，然后，返回首页
  //	第二次再进入列表页面，读取的是第一次进入的缓存，不更新。

  // 如果 要 form(离开) 的页面是 keepAlive缓存的，
  // 再根据 deepth 来判断是前进还是后退
  // 如果是后退，就把当前页面从缓存列中删除，
  if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
      var index = indexData.include.indexOf(from.name);
      index !== -1 && indexData.include.splice(index, 1);
  }
})
</script>
<style scoped lang="scss">
.common-layout,.lay-container{
  height: 100%;
  .lay-aside{
    height: 100%;
  }
}
.el-header{
  background-color: $header-color;
}
</style>